<template>
  <el-select v-model="copyValue" filterable clearable placeholder="请选择..." @change="updateValue"
             style="width:100%;min-width:200px">
    <el-option
      v-for="item in options"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]">
    </el-option>
    <el-col :span="24">
      <div style="float: right;margin-right:10px;padding-bottom: 10px">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNo"
          :page-size="pageInfo.pageSize"
          layout="total, prev, pager, next"
          :total="pageInfo.total">
        </el-pagination>
      </div>
    </el-col>
  </el-select>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: "PageSelect",
    props: {
      //绑定值
      value: String,
      //option的label在列表中对应的key
      labelKey: String,
      //option的value在列表中对应的key
      valueKey: String,
      //分页信息
      page: Object,
      // url
      url: String,
      // 查询参数对象
      params: Object
    },
    watch: {
      value: {
        handler: function (val) {
          this.copyValue = val;
        },
        deep: true
      }
    },
    data() {
      return {
        pageInfo: {
          pageNo: 0,
          pageSize: 10,
          total: 0
        },
        copyValue: this.value,
        options: []
      }
    },
    mounted() {
      if (this.page) {
        this.pageInfo = Object.assign(this.pageInfo, this.page)
      }
      this.handleCurrentChange()
    },
    methods: {
      //更新值(等同v-model)
      updateValue() {
        this.$emit('update:value', this.copyValue);
        this.$emit('change', this.copyValue);
      },
      //翻页
      handleCurrentChange(val) {
        const param = Object.assign({}, this.params, this.pageInfo)
        request.post(this.url, param).then(res => {
          this.options = res.data.content
          this.pageInfo.total = res.data.totalElements
        })
      }
    }
  };
</script>
